<template>
  <div class="sub-main-w2rap-view" id="timeClose">
    <div class="fix-operate-map">
      <commonCard title="时序浏览" iconName="mask" canClose @close="closeModal">
        <div class="progress-line-two">
          <template v-for="(item, index) in progressArr" :key="index" :item="item">
            <div :class="{'is-active': item.isActive}" class="line-circle" @click="handleProgress(index)">
              <span>{{ index + 1 }}</span>
            </div>

            <div class="line-only" v-if="index < progressArr.length - 1" @click="handleProgress(index)">

            </div>
          </template>
        </div>
        <div class="progress-line-two">
          <template v-for="(item, index) in progressArr" :key="index" :item="item">
            <div :class="{'is-active': item.isActive}" class="line-text" @click="handleProgress(index)">
              <span style="right: 10%">{{ item.value }}</span>
            </div>
          </template>
        </div>
      </commonCard>
    </div>
  </div>
</template>

<script>
import {defineComponent, reactive, ref} from "vue";
import commonCard from '@/components/commonCard/index.vue'
import Data from  "../../../../../public/config/data.json"
export default defineComponent({
  name: "index.vue",
  components: {commonCard},
  setup() {
    const dialogFormVisible = ref(true)
    const closeModal = () => {
      // console.log();
      document.getElementById("timeClose").style.display = "none";
      // dialogFormVisible.value = true
    }
    //时序进度
    const progressArr = reactive(Data).timeProcess
    const handleProgress = (i) => {

        // console.log(i);
        window.viewer.flyTo(window.viewer.jrism.getLayer("taicangdemo").tileset)
      for (let index = 0; index < progressArr.length; index++) {

        // 比当前进度小的都是激活状态
        progressArr[index].isActive = (index) === i
      }
    }

    return {
      dialogFormVisible,
      closeModal,
      handleProgress,
      progressArr,
    }

  }
})
</script>

<style lang="scss">
#timeClose {
  display: none;
}
.sub-main-w2rap-view {
  position: absolute;
  top: 75%;

  .fix-operate-map {
    pointer-events: auto;
    width: 700px;
    min-height: 166px;
    left: 560px;
    position: absolute;

    .progress-line-two {
      display: flex;
      align-items: center;
      margin-left: 15%;
      cursor: pointer;

      .line-circle {
        width: 24px;
        height: 24px;
        background: rgba(255, 255, 255, 0.05);
        border: 2px solid rgba(255, 255, 255, 0.32);
        border-radius: 80px;
        color: rgba(255, 255, 255, 0.32);
        line-height: 24px;
        text-align: center;
        margin-left: 20px;

        &.is-active {
          background: #409EFF;
          color: #FFFFFF;
          border-color: #409EFF;
        }
      }

      .line-text {
        color: #FFFFFF;
        width: 100%;
        &.is-active {
          color: #409EFF;
          font-weight: 500;
        }
      }


      .line-only {
        width: 60px;
        cursor: pointer;
        height: 1px;
        background: rgba(255, 255, 255, 0.5);
        margin: 0 40px;

        &.is-active {
          background: #409EFF;
        }
      }
    }
  }
}


</style>
